<template>
	<view class="main">
		<view class="mine__bg" style="background-image: url(https://image.workair.top/uplaod/20250619/7c948111949254ddd8559c3db99b73772c0a82f5.png);;padding-top: 140rpx;">
			<navbar  :btnColors='btnColor' title="优惠券详情" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
			<view class="flex flex-direction contents">
				 <view class="flex justify-center align-center text-center flex-direction">
				 	 <view  class="coupon_title" style="color:  #36B3E9;margin-top: 48rpx;">
						 <text style="font-size: 32rpx;margin-top: 15rpx;">￥</text>
						  <text >{{couponInfo.amount}}</text>						
					 </view> 
					 <text class="coupon_info text-bold">{{couponInfo.name}}</text>
				 </view>
				
				<view class="class_bottom">
					<view class="">
						有效期: {{couponInfo.start_time}}至{{couponInfo.end_time}}
					</view>
					
					<view class="mt-10">
						使用规则: {{couponInfo.coupon_info}}
					</view>
				</view>				
			</view>
			
			
			<view class="flex flex-direction content" style="margin-top: 30rpx;">
				<view class="flex text-bold" style="font-size: 32rpx;color: #222222; margin-top: 32rpx;margin-left: 32rpx;">
					使用说明
				</view>
				<view class="cash">
					<rich-text :nodes="couponInfo.coupon_rule"></rich-text>
				</view>
			</view>
		</view>
	
	<view class="about-button" style="background-color: #ffffff">
		<view class="ml-15">						
			<button class="about-button-alipay" style="background:#36B3E9;border: none;color: #ffffff;height: 80rpx;text-align: center;line-height: 88rpx;height: 88rpx;;" @click="docoupon">
				
				<view class=" ml-10">
				   立即使用
				</view>
				</button>
		</view>			
	</view>
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					...getApp().globalData.config,		
					cashType:'',
					couponInfo:{},
					
				};
			},
			
			onLoad(options){
				let that=this
				if(options.parms){
				  this.couponInfo=JSON.parse(options.parms)			  
				}
				
			},	
			methods:{	
				//使用优惠券
				docoupon(){
					this.$routers.router('/pages/class/index','switchTab') 
				},
			  },
			onShow(){	
			}
		}	
</script>

<style>
	page{
		background: #F0F9FE;
	}
	.nav-bar-title{
		color: #FFFFFF !important;
	}
	
	
	.about-button{		
			display: flex;
			flex-direction: row;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			padding-bottom: 40rpx;
			padding-top: 20rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			height: 80rpx;
			color: #FFFFFF;
			 border: none !important;
		}
		
		.about-button-alipay{
			display: flex;
			justify-content: center;
			width: 620rpx;
			font-size: 28rpx;
			color: #031F37;
			border: none !important;
			border-radius: 40rpx;
			
		}
		
		button::after {
		    border: none;
		}
		
		.about-button:active{
		  opacity: 0.5;
		}
	
	.mine__bg{
		height: 297rpx;
		background-size: 100% 100%;
	}
	
	.contents{
		width: 702rpx;
		/* height: 394rpx; */
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: -60rpx;
		background-image: url(https://image.workair.top/uplaod/20250620/f344def61b414d7c537426bbb30b97ffd0147a91.png);
		padding-bottom: 40rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.content{
		width: 702rpx;
		/* height: 394rpx; */
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: -60rpx;
		background-color: #FFF;
		padding-bottom: 40rpx;
	}
	.coupon_title{
		display: flex;
		align-items: center;
		text-align: center;
		font-weight: bold;
		font-size: 60rpx;
		color: #36B3E9;
	}
	.coupon_info{
		margin-top: 10rpx;
		/* font-weight: 600; */
		font-size: 32rpx;
		color: #222222;
	}
	
	.class_bottom{
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #555555;
		margin-left: 32rpx;
		margin-top: 70rpx;
	}
	.cash{
		margin-left: 32rpx;
		margin-right: 32rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #888888;
		margin-top: 20rpx;
		line-height: 45rpx;
	}
</style>